<template>
  <div class="text-line-height">
    <div class="crumbs-box">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/activity/list?tabsName=TeachingResearch' }">活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>教研详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="listData" class="margin30">
      <div class="block-height">
        <div class="fl text-line-height">
          <div class="fl marginL10 fs-22 fw">{{ listData.title }}</div>
        </div>
        <div v-if="isFromReport" class="fr">
          <el-button v-if="this.$route.query.status === 'unprocessed'" type="warning">违规</el-button>
        </div>
        <div v-else class="fr">
          <el-button
            v-if="listData.manageState === 'UNAUDITED'"
            type="primary"
            size="medium"
            plain
            @click="getAudit('passed')"
          >通过</el-button>
          <el-button
            v-if="listData.manageState === 'UNAUDITED'"
            type="primary"
            size="medium"
            @click="getAudit('not_passed')"
          >不通过</el-button>
          <el-button type="primary" plain @click="journal">查看日志</el-button>
          <el-button type="primary" @click="revise('')">修改</el-button>

          <el-button
            v-if="listData.manageState === 'NORMAL' || listData.manageState === 'UNAUDITED'"
            type="warning"
            size="medium"
            @click="getProcessStatus('disable_content')"
          >违规</el-button>
          <el-button v-else type="warning" size="medium" @click="getProcessStatus('enable')">取消违规</el-button>

          <el-button type="danger">删除</el-button>
        </div>
      </div>
      <div class="marginL10">
        <div>
          <span class="fs-14">教研对象：{{ listData.teachingTarget.itemName }}</span>
          <br />
          <span v-if="listData.cateTags &&listData.cateTags.length > 0">
            <el-tag
              v-for="(item, index) in listData.cateTags"
              :key="index"
              type="info"
              effect="dark"
              size="mini"
              class="marginL10"
            >{{ item.tagsName }}</el-tag>
          </span>
          <span v-if="listData.colTags &&listData.colTags.length > 0">
            <el-tag
              v-for="(item, index) in listData.colTags"
              :key="index"
              type="info"
              effect="dark"
              size="mini"
              class="marginL10"
            >{{ item.tagsName }}</el-tag>
          </span>
          <br />
          <span class="fs-14">时间：{{ listData.startTime }} 至 {{ listData.endTime }}</span>
        </div>

        <el-row :gutter="20" class="el-row marginT10">
          <el-col :span="12">
            <el-col :span="24">
              <div>
                <div>
                  <span class="fs-16 fw">发起者</span>
                </div>
                <div class="avatar-box-style">
                  <el-avatar shape="square" size="large" :src="listData.user.avatarUrl" />
                  <div class="user-info-right pl10 line-height20">
                    <p>
                      {{ listData.user.name }}
                      <span
                        v-if="listData.user.title === 'PRIMARY'"
                        class="fs-12"
                      >一级教师</span>
                      <span v-if="listData.user.title === 'SECONDARY'" class="fs-12">二级教师</span>
                      <span v-if="listData.user.title === 'TERTIARY'" class="fs-12">三级教师</span>
                      <span v-if="listData.user.title === 'SENIOR'" class="fs-12">高级教师</span>
                      <span v-if="listData.user.title === 'POSITIVE_SENIOR'" class="fs-12">正高级教师</span>
                      <el-button type="text" class="marginL50">查看详情</el-button>
                    </p>
                    <p class="fs-14">{{ listData.user.school }}</p>
                    <span class="fs-12">
                      {{ listData.user.subject }}:
                      <span
                        v-if="listData.user.goodAtLabels && listData.user.goodAtLabels.length > 0"
                      >
                        <el-tag
                          v-for="(goodAtItem, goodAtIndex) in listData.user.goodAtLabels"
                          :key="goodAtIndex"
                          type="info"
                          effect="dark"
                          size="mini"
                          class="marginL10"
                        >{{ goodAtItem }}</el-tag>
                      </span>
                      <!-- <el-tag type="info" effect="dark" size="mini" class="marginL10">散文创作</el-tag> -->
                    </span>
                    <br />
                    <span class="fs-12">
                      教师成长:
                      <span
                        v-if="listData.user.trainSpecialityLabels && listData.user.trainSpecialityLabels.length > 0"
                      >
                        <el-tag
                          v-for="(trainItem, trainIndex) in listData.user.trainSpecialityLabels"
                          :key="trainIndex"
                          type="info"
                          effect="dark"
                          size="mini"
                          class="marginL10"
                        >{{ trainItem }}</el-tag>
                      </span>
                      <!-- <el-tag type="info" effect="dark" size="mini" class="marginL10">教育心理学</el-tag>
                      <el-tag type="info" effect="dark" size="mini" class="marginL10">学生心里辅导</el-tag>-->
                    </span>
                  </div>
                </div>
              </div>
              <div>
                <el-button plain>违规&nbsp;{{ listData.countViolate }}&nbsp;次</el-button>
                <el-button class="marginL20" plain>被举报&nbsp;{{ listData.countHasTipOff }}&nbsp;次</el-button>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="marginT20">
                <span class="fs-16 fw">教研介绍</span>
                <p class="fs-12 line-height20" v-html="listData.intro" />
              </div>
              <video v-if="listData.introVideo" width="100%" controls>
                <source :src="listData.introVideo" type="video/mp4" />
              </video>
              <div v-if="listData.introImage">
                <el-image class="img-style-size" :src="listData.introImage" />
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col class="marginT30" :span="24">
              <div>
                <span class="fs-16 fw">文件内容</span>
              </div>
              <div
                v-if="listData.files && listData.files.length > 0"
                class="line-height20 marginB10"
              >
                <div v-for="(filesItem, filesIndex) in listData.files" :key="filesIndex">
                  <a class="color-blue" href="#">{{ filesItem.fileName }}</a>
                  <span class="marginL10 fs-14">(我的文件)</span>
                </div>
              </div>
            </el-col>
            <el-col class="marginT30" :span="24">
              <div class="clearfix">
                <span class="fs-16 fl">流程安排</span>
                <el-button class="fr" type="primary" @click="revise('second')">修改</el-button>
              </div>
              <div class="line-height20 marginB10">
                <ol
                  v-if="listData.stepList && listData.stepList.length > 0"
                  class="info-show-style"
                >
                  <li v-for="(stepItem, stepIndex) in listData.stepList" :key="stepIndex">
                    {{ stepItem.title }}
                    <dl v-if="stepItem.activities && stepItem.activities.length > 0">
                      <dt class="color-gray fs-12">{{ stepItem.startTime }} 至 {{ stepItem.endTime }}</dt>
                      <dd
                        v-for="(activitiesItem, activitiesIndex) in stepItem.activities"
                        :key="activitiesIndex"
                        class="activities"
                      >
                        <div class="left">
                          <span v-if="activitiesItem.type === 'TEACHING_RESEARCH'" class="green">教研</span>
                          <span v-if="activitiesItem.type === 'LIVE_BORADCAST'" class="green">在线课程</span>
                          <span v-if="activitiesItem.type === 'MEETING'" class="green">多人会议</span>
                          <span v-if="activitiesItem.type === 'PREPARE_LESSON'" class="green">教学设计</span>
                          {{ activitiesItem.title }}
                        </div>
                        <div class="right">{{ activitiesItem.startTime }}</div>
                      </dd>
                    </dl>
                    <dl v-else>
                      <dt class="color-gray fs-12">{{ stepItem.startTime }} 至 {{ stepItem.endTime }}</dt>
                      <dd class="activities" />
                    </dl>
                  </li>
                </ol>
              </div>
            </el-col>
          </el-col>
        </el-row>
        <div class="marginT30 el-card-size">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane disabled>
              <span slot="label">
                <i class="el-icon-view" />
                {{ listData.enrollWaitCount }}
              </span>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label">
                <i class="el-icon-chat-dot-round" />
                {{ listData.commentCount }}
              </span>
              <div class="text-center">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item>
                    <el-input v-model="formInline.search" placeholder="搜索" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>

              <div v-if="commentList && commentList.length > 0" class="el-tab-pane-size">
                <!--    star        -->
                <div v-for="(item, index) in commentList" :key="index" class="text-line-height-30">
                  <div v-if="item.userId !== listData.userId">
                    <!-- {{ item.userId }} -->
                    <div class="clearfix">
                      <el-avatar v-if="item.userHead" class="avatar-size fl" :src="item.userHead" />
                      <el-avatar
                        v-else
                        class="avatar-size fl"
                        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                      />
                      <div class="fl marginL10 text-line-height">
                        <div class="fl">
                          <span class="fs-16">{{ item.userName }}</span>
                          <span class="fs-14 color-gray marginL10">{{ item.createTime }}</span>
                          <span
                            v-if="item.status === 'CANCEL'"
                            class="fs-14 color-gray marginL10"
                          >评论已取消</span>
                          <span
                            v-if="item.status === 'NOT_SHOW'"
                            class="fs-14 color-gray marginL10"
                          >评论已屏蔽</span>
                        </div>
                      </div>
                    </div>
                    <div style="margin-left: 50px">
                      <el-row>
                        <el-col :span="16">
                          <div
                            class="grid-content text-line-height-30"
                            style="word-wrap:break-word;word-break:break-all;"
                          >
                            <span>{{ item.content }}</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-content">
                            <br />
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div>
                            <el-button type="text" @click="getUpdateStatus(item,index, true)">屏蔽</el-button>
                            <el-button type="text" @click="getUpdateStatus(item,index, false)">恢复</el-button>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div v-else>
                    <div class="clearfix">
                      <div class="fl marginL50 text-line-height">
                        <div class="fl">
                          <span class="fs-16 color-blue">作者回复</span>
                          <span class="fs-14 color-gray marginL10">{{ item.createTime }}</span>
                          <span
                            v-if="item.status === 'CANCEL'"
                            class="fs-14 color-gray marginL10"
                          >评论已取消</span>
                          <span
                            v-if="item.status === 'NOT_SHOW'"
                            class="fs-14 color-gray marginL10"
                          >评论已屏蔽</span>
                        </div>
                      </div>
                    </div>
                    <div style="margin-left: 50px">
                      <el-row>
                        <el-col :span="16">
                          <div
                            class="grid-content text-line-height-30"
                            style="word-wrap:break-word;word-break:break-all;"
                          >
                            <span>{{ item.content }}</span>
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-content">
                            <br />
                          </div>
                        </el-col>
                        <el-col :span="4">
                          <div class="grid-content">
                            <el-button type="text">屏蔽</el-button>
                            <el-button type="text">恢复</el-button>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>

              <pagination v-if="commentList && commentList.length > 0" :total="total" />
            </el-tab-pane>
            <el-tab-pane disabled>
              <span slot="label">
                <i class="el-icon-thumb" />
                {{ listData.thumbNum }}
              </span>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <Journal :dialog-visible="journalVisible" :dialog-obj="journalObj" @Callback="getJournalCall" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index';
import Journal from '@/components/Journal/index';
import { getTeachingResearchDetail, getComment, updateStatus, audit, processStatus } from '@/api/activity';

export default {
  name: 'ReportDetail',
  components: {
    Pagination,
    Journal
  },
  data () {
    return {
      isFromReport: this.$route.query && this.$route.query.report ? this.$route.query.report : false,
      activeName: 'second',
      formInline: {
        search: ''
      },

      journalVisible: false,
      journalObj: {
        sysEnums: null,
        targetId: null,
        userId: null
      },
      listData: null,
      total: 10,
      commentList: '', // 评论列表
      // 查询条件
      listQuery: {
        condition: {
          keyword: '',
          status: '',
          subjectId: this.$route.query.param,
          subjectType: 'TEACHING_RESEARCH'
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      }
    };
  },
  created () {
    console.log('this.$route.query.report:', this.isFromReport);
    if (!this.$route.query.param) {
      this.$router.push({
        path: '/activity/list',
        params: {
          tabsName: 'TeachingResearch'
        }
      });
      return;
    } else {
      this.init();
      this.getCommentList();
    }
  },
  methods: {
    // 日志
    journal () {
      this.journalObj = {
        sysEnums: [],
        targetId: this.$route.query.param,
        userId: null
      };
      this.journalVisible = true;
    },
    getJournalCall (obj) {
      this.journalVisible = obj;
    },

    // 审核 通过/不通过
    getAudit (auditResult) {
      audit({
        result: auditResult,
        targetId: this.listData.activityId
      }).then(res => {
        console.log(res.data);
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        // this.listData[index].status = notShow ? 'NOT_SHOW' : 'OK';
      });
    },

    // 审核 违规/取消违规
    getProcessStatus (targetType) {
      processStatus({
        result: targetType,
        targetId: this.listData.activityId,
        targetType: 'web_cast'
      }).then(res => {
        var manageState;
        switch (targetType) {
          case 'disable_content':
            manageState = 'VIOLATE';
            break;
          case 'enable':
            manageState = 'NORMAL';
            break;
        }
        this.listData.manageState = manageState;

        this.$message({
          message: '操作成功',
          type: 'success'
        });
      });
    },

    revise (step) {
      this.$router.push({
        path: '/activity/teachingEditOrAdd',
        query: { param: this.$route.query.param, step: step }
      });
    },

    init () {
      this.loading = true;
      getTeachingResearchDetail(this.$route.query.param)
        .then(res => {
          this.listData = res.data;
          this.loading = res.loading;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    onSubmit () { },
    // 查询评论列表
    getCommentList () {
      getComment(this.listQuery)
        .then(res => {
          console.log(res.data);
          this.commentList = res.data.records;
          console.log('commentList:', this.commentList);
          this.total = res.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 评论 - 屏蔽/恢复
    getUpdateStatus (items, index, notShow) {
      updateStatus({
        id: items.id,
        notShow: notShow
      }).then(res => {
        this.commentList[index].status = notShow ? 'NOT_SHOW' : 'OK';
      });
    },

    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      this.init();
    }
  }
};
</script>

<style lang="scss" scoped>
.img-style-size {
  width: 100%;
  height: 130px;
  padding: 5px;
  background: #eeeeee;
  border: solid #eeeeee 1px;
}
.block-height {
  height: 40px;
}
.text-line-height {
  line-height: 40px;
}
.avatar-size {
  width: 40px;
  height: 40px;
}
.text-line-height-30 {
  line-height: 30px;
}
.el-card-size {
  width: 700px;
}
.el-row-size {
  width: 700px;
  height: 100px;
}
.text-indent {
  text-indent: 50px;
}
.el-tab-pane-size {
  height: 700px;
  overflow: auto;
}

.el-button + .el-button {
  margin-left: 10px;
}

.activities {
  display: flex;
  justify-content: space-between;
  .left {
    span:first-child {
      border: 1px solid red;
      padding: 2px 4px;
    }
  }
  .right {
    color: #999;
    font-size: 12px;
  }
}
</style>
